<template>

  <div>
    <input type="file" id="myFile" @change="initSelect" multiple="multiple" />
<!--    <el-progress :percentage="ppp" status="success"></el-progress>-->

    <div v-for="(file,index) in allFile" :key="file.name" >
      <span>{{file.name}}</span>
      <el-progress :percentage="file.per"></el-progress>


    </div>
    <el-progress :percentage="ppp"></el-progress>
<!--    <el-row>-->
      <el-button type="success" @click="tusUpload()"  >上传</el-button>
      <el-button type="success" @click="tusUploadAll()"  >上传全部</el-button>
      <el-button type="success" @click="refreshDisk()"  >刷新</el-button>
<!--    </el-row>-->

<!--    <el-upload-->
<!--      class="upload-demo"-->
<!--      multiple-->
<!--      action="https://jsonplaceholder.typicode.com/posts/"-->
<!--      :on-preview="handlePreview"-->
<!--      :on-remove="handleRemove"-->
<!--      :file-list="fileList">-->
<!--      <el-button size="small" type="primary">点击上传</el-button>-->
<!--      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--    </el-upload>-->
  </div>
</template>

<script>
import SparkMD5 from 'spark-md5';
import $ from "jquery";
import Disk from "@/views/disk/index";
import DiskUtil from "@/util/disk";
import store from "@/store";
import {mapGetters} from "vuex";
// import {HttpRequestOptions} from "element-ui/types/upload";
// import  * as tus from "tus-js-client";
export default {
  name: "uploadPlus",
  data() {
    return {
      percentages:[],
      allFile:[],
      file:[],
      ppp:0,
      fileList:[],
      upload: {
        open: false,
        isUploading: false
      },
      errorVisible: false,
      errorData: []
    };
  },
  created() {
  },
  computed: {
    ...mapGetters(["searchData","userInfo"]),
  },
  methods:{
    initSelect(){

      var files = document.getElementById("myFile").files;
      console.log(files);
      this.allFile = files;
      console.log(this.allFile[0]);

      var index = 0;
      var _this = this;
      this.allFile.forEach(file => {
        this.$set(file,"per",10);

        _this.percentages[index] = 0;
        index+=1;
        console.log("++")

      });
      console.log(this.allFile)
    },
    refreshDisk(){
      DiskUtil.$emit('refreshDisk','param');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    tusUploadAll(){
      let token = store.getters.access_token;
      var index = 0;
      var _this = this;
      var tus = require("tus-js-client");
      this.allFile.forEach(file => {
        var upload = new tus.Upload(file, {
          endpoint: "http://localhost:9999/disk/tus",
          retryDelays: [0, 3000, 5000, 10000, 20000],
          chunkSize: 10*1024*1024, //分片大小10mb,
          headers:{
            "Authorization": "Bearer "+token
          },
          metadata: {
            filename: file.name,
            folderId: this.searchData.folderId,
            username: this.userInfo.username,
          },
          onError: function(error) {
            console.log("Failed because: " + error);
          },
          onProgress: function(bytesUploaded, bytesTotal) {
            var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)*1;
            var percentage2 = (bytesUploaded / bytesTotal * 100).toFixed(0) *1;
            // console.log(percentage2);
            // _this.percentages[index]=percentage2;
            // console.log(_this.percentages);
            // console.log(percentage2);
            // _this.$set(file,"per",percentage2);
            file.per = percentage2;
            // _this.allFile.reverse();
            // Vue.set(fiel,"per",percentage2);
            // _this.initSelect();
            // console.log(file.name+':');
            // console.log(bytesUploaded, bytesTotal, percentage + "%");
          },
          onSuccess: function() {
            console.log("Download %s from %s", upload.file.name, upload.url);
            _this.refreshDisk();
            // console.log(_this.allFile)

          }
        });

        // Check if there are any previous uploads to continue.
        upload.findPreviousUploads().then(function (previousUploads) {
          // Found previous uploads so we select the first one.
          if (previousUploads.length) {
            upload.resumeFromPreviousUpload(previousUploads[0]);
          }

          // Start the upload
          upload.start();

        });
      });
    },
    tusUpload(){
      let token = store.getters.access_token;
      console.log(token+"?")
      const _this = this;
      var tus = require("tus-js-client");
      const file = document.getElementById("myFile").files[0];
      var upload = new tus.Upload(file, {
        endpoint: "http://localhost:9999/disk/tus",
        retryDelays: [0, 3000, 5000, 10000, 20000],
        chunkSize: 10*1024*1024, //分片大小10mb,
        headers:{
          "Authorization": "Bearer "+token
        },
        metadata: {
          filename: file.name,
          folderId: this.searchData.folderId,
          username: this.userInfo.username,
        },
        onError: function(error) {
          console.log("Failed because: " + error);
        },
        onProgress: function(bytesUploaded, bytesTotal) {
          var percentage = (bytesUploaded / bytesTotal * 100).toFixed(2)*1;
          var percentage2 = (bytesUploaded / bytesTotal * 100).toFixed(0) *1;
          console.log(percentage2);
          _this.ppp=percentage2;
          console.log(bytesUploaded, bytesTotal, percentage + "%");
        },
        onSuccess: function() {
          console.log("Download %s from %s", upload.file.name, upload.url);
          _this.refreshDisk();
        }
      });

      // Check if there are any previous uploads to continue.
      upload.findPreviousUploads().then(function (previousUploads) {
        // Found previous uploads so we select the first one.
        if (previousUploads.length) {
          upload.resumeFromPreviousUpload(previousUploads[0]);
        }

        // Start the upload
        upload.start();

      });

    }
  }
}
</script>

<style scoped>

</style>
